<template>
    <div id="fireManagement">
        <div style="height: 100%;">
            <div class="trees">
                <div class="tree_title">
                    <h3 class="tree_title_h3">机构列表</h3>
                </div>
                <div class="tree_body">
                    <Tree :data="baseData" @on-select-change="clickTree"></Tree>
                </div>
            </div>
            <div class="body_right">
                <div class="header-right">
                    物资器材领取管理
                </div>
                <div class="btn_group">
                    <!-- <Select clearable  v-model="truckTypeText" filterable size="small" placeholder="物资类型" style="width: 20.4rem;">
                       <Option  v-for="item in truckTypeData" :value="item.value" :key="item.value">{{item.value}}</Option>
                     </Select>-->
                    <Input v-model="materials_name" placeholder="名称" style="width: 15rem;" size="small"></Input>
                    <Button type="primary" icon="ios-search" size="small" @click="search">查询</Button>
                    <Button type="ghost" icon="ios-trash-outline" size="small" style="float:right;margin-right: 6px;" @click="batchDele">批量删除</Button>
                    <Button type="ghost" icon="ios-plus-empty" size="small" style="float:right;margin-right: 6px;" @click="add">新增</Button>
                </div>
                <div class="tableWidth">
                    <Table border :columns="columns7" :data="data6" stripe @on-selection-change="compileSelect"></Table>
                </div>
                <!--车辆信息管理表-->
                <Modal v-model="modal5" title="物资器材领取信息" width="500" :closable="false" :mask-closable="false">
                    <Form action="post" ref="formValidate" :model="formValidate" :rules="ruleValidate"
                          :label-width="90" style="margin-right: 20px">
                        <Form-item label="所属单位" prop="departmentName">
                            <p>{{formValidate.departmentName}}</p>
                        </Form-item>
                        <Form-item label="物资名称" prop="materialsName">
                            <Input v-model="formValidate.materialsName" placeholder="物资名称"/>
                        </Form-item>
                        <Form-item label="领取人员" prop="recipient">
                            <Input v-model="formValidate.recipient" placeholder="领取人"/>
                        </Form-item>
                        <Form-item label="领取数量" prop="claimNumber">
                            <Input-number @on-change="equipmentSupplies" :min="0" v-model="formValidate.claimNumber" style="width: 360px;"></Input-number>
                        </Form-item>
                        <Form-item label="出库时间" prop="unload">
                            <Date-picker type="date" placeholder="选择日期和时间" v-model="formValidate.unload"
                                         @on-change="showLoadTime"></Date-picker>
                        </Form-item>
                        <Form-item label="经办人员" prop="operator">
                            <Input v-model="formValidate.operator" placeholder="经办人"/>
                        </Form-item>
                        <Form-item label="备注" prop="remark">
                            <Input type="textarea" :rows="4" v-model="formValidate.remark" placeholder="请输入...(200字以内)"/>
                        </Form-item>
                    </Form>
                    <div slot="footer">
                        <Button type="ghost" size="small" @click="cancelFrom">取消</Button>
                        <Button type="primary" size="small" @click="handleSubmit('formValidate')">提交</Button>
                    </div>
                    </Form>
                </Modal>
                <!-- 分页显示-->
                <div class="page_container">
                    <Page :current="currentPage" :total="totalCount" size="small" simple class="page_btn"
                          @on-change="changePage"></Page>
                    <P class="page_text">共{{totalCount}}条</P>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        data() {
          const validateUnload = (rule,value,callback) => {
            if(value === ''){
              callback(new Error('请选择日期'));
            }else{
              callback();
            }
          };
            return {
              departmentCode:CURRENT_LEADER.departmentCode,  //登录人员code值
              valueLen:'', //点击树获得的code值
                baseData: [],
                materials_name: '', //按照物资名称搜索
                idss: "",   //批量删除项（各项ids值-以字符串形式串联起来，逗号分割）
                currentPage: 1, //当前页
                totalCount: 0,  //总条数
                truckTypeData: [],
                truckTypeText: "",
                search_code: '', //按照物资名称搜索
                /*  表头开始*/
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                      title: '所属单位',
                      key: 'departmentName',
                      align: 'center'

                    },
                    {
                        title: '名称',
                        key: 'materialsName',
                        align: 'center'

                    },
                    {
                        title: '数量',
                        key: 'claimNumber',
                        align: 'center'

                    },
                    {
                        title: '领用人',
                        key: 'recipient',
                        align: 'center'

                    },
                    {
                        title: '出库时间',
                        key: 'unload',
                        align: 'center',
   /*                     render: function (h, params) {
                            var newTime = new Date(params.row.unload);
                            var Y = newTime.getFullYear();
                            var M = newTime.getMonth() + 1;
                            var D = newTime.getDate();
                            var H = newTime.getHours();
                            var m = newTime.getMinutes();
                            var s = newTime.getSeconds();
                            var time = Y + "-" + M + "-" + D;
                            return h('div', time);
                        }*/
                    },
                    {
                        title: '经办人',
                        key: 'operator',
                        align: 'center'
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        align: 'center'

                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.carInfoEdit(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.carRemoveInfo(params.row.id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                /*表头结束*/
                /* 表格数据显示区域*/
                data6: [],
                /* 全局变量*/
                modal5: false,
                formValidate: { //表单验证
                    id: '',                                  //1
                    departmentCode:'',
                    departmentName:'',
                    departmentNameCopy:'',
                    materialsName: '',                    //2    物资名称
                    materialsTypeName: '',               //3     物资类型名称
                    claimNumber: 0,                       //5      数量
                    remark: '',                            //7     备注
                    unload: '',                            //9     出库时间
                    operator: '',                          //10    经办人员
                    recipient: '',                         //11    领用人员
                },
                ruleValidate: {
                    departmentName: [
                        {required: true, message: '所属单位不能为空', trigger: 'blur'}
                    ],
                    materialsName: [
                        {required: true, message: '物资名称不能为空', trigger: 'blur'}
                    ],
                    recipient: [
                        {required: true, message: '领取人员不能为空', trigger: 'blur'},
                    ],
                    claimNumber: [
                        {required: true,type:'number', message: '领取数量不能为空', trigger: 'change'}
                    ],
                    unload: [
                        {required: true, validator:validateUnload, trigger: 'change'}
                    ],
                    operator: [
                        {required: true, message: '经办人员不能为空', trigger: 'blur'}
                    ],
                    remark: [
                        {type:'string',max:200, message: '输入200字以内', trigger: 'blur'}
                    ],
                }
            }
        },
        /* 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。*/
        created() {
            this.dictionary_flipList();
            this.equipmentClaim_flipList();
            this.organization_flipList();
        },
        /*在挂载开始之前被调用：相关的 render 函数首次被调用。*/
        mounted: function () {

        },
        methods: {
          equipmentSupplies(value){
            if(parseInt(value) == value){
              this.formValidate.claimNumber = value;
            }else {
              this.formValidate.claimNumber = 0;
            }
          },
          add() {
            if (this.formValidate.departmentName != '') {
              this.formValidate.id = "";
              this.modal5 = true;
            }else if( this.valueLen <= 0){
              this.$Modal.info({
                content: '请在机构列表选择机构单位！'
              });
            }else{
              this.$Message.error('权限不够，无法新增，请联系管理员！');
            }
          },
          clickTree(value) {
            this.valueLen = value.length;
            if (this.valueLen > 0 && this.departmentCode<=value[0].code) {
              this.formValidate.departmentCode = value[0].code;
              this.formValidate.departmentName = value[0].fullTitle;
              this.formValidate.departmentNameCopy = value[0].fullTitle;
              this.search_code=value[0].code;
            }else {
              this.formValidate.departmentCode = '';
              this.formValidate.departmentName = '';
              this.formValidate.departmentNameCopy = '';
              this.search_code="";
            }
            this.search();
          },
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                return time
            },
            carInfoEdit(value) { //修改
                this.formValidate.id = value.id;
                this.formValidate.departmentCode = value.departmentCode;
                this.formValidate.departmentName = value.departmentName;
                this.formValidate.materialsTypeName = value.materialsTypeName;
                this.formValidate.materialsName = value.materialsName;
                this.formValidate.claimNumber = value.claimNumber;
                this.formValidate.remark = value.remark;
                this.formValidate.unload = value.unload;
                this.formValidate.operator = value.operator;
                this.formValidate.recipient = value.recipient;
                this.modal5 = true;
            },
            showLoadTime(data) {  //改变时，将日期值赋值
                this.formValidate.unload = data;
            },
            cancelFrom() {  //单击取消重置并关闭模态框
                this.handleReset('formValidate');
                this.modal5 = false;
                this.formValidate.departmentCode =this.search_code;
            },
            changePage(page) {     //分页展示
                this.currentPage = page;
                this.equipmentClaim_flipList();
            },
            equipmentClaim_flipList() { //显示与查询接口
                var _this = this;
                ezjsUtil.request(apiConstants.equipmentClaim_flipList,
                    {
                        departmentCode: _this.formValidate.departmentCode,
                        materialsName: _this.materials_name,
                        pageNo: _this.currentPage
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.data6 = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                    }
                )
            },
            equipmentClaimEdit() { //新增
                var _this = this;
                ezjsUtil.request(apiConstants.equipmentClaim_edit,
                    {
                        id: _this.formValidate.id,
                        departmentCode: _this.formValidate.departmentCode,
                        departmentName: _this.formValidate.departmentName,
                        materialsName: _this.formValidate.materialsName,
                        materialsTypeName: _this.formValidate.materialsTypeName,
                        claimNumber: _this.formValidate.claimNumber,
                        remark: _this.formValidate.remark,
                        unload: _this.formValidate.unload,
                        operator: _this.formValidate.operator,
                        recipient: _this.formValidate.recipient,
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.formValidate.departmentName="";
                        _this.formValidate.departmentCode="";
                        _this.equipmentClaim_flipList();
//                         _this.formValidate.departmentName = _this.formValidate.departmentNameCopy;
                        _this.valueLen = '';
                        _this.organization_flipList();

                    }
                )
            },
            /* 删除数据部分starting*/
            compileSelect(selection, row) {   //表格选择
                var ids = "";
                for (var i = 0; i < selection.length; i++) {
                    ids = selection[i].id + "," + ids;    //逗号分隔
                }
                this.idss = ids;
            },
            carRemoveInfo(value) {  //单个删除
                this.idss = value;
                this.equipmentClaim_removeByIds();
            },
            batchDele() { //批量删除
              if(this.idss !==""){
                this.equipmentClaim_removeByIds(); //调用删除接口
              } else{
                  this.$Message.error('请选择删除项!');
              }

            },
            equipmentClaim_removeByIds() { //删除
                var _this = this;
                ezjsUtil.request(apiConstants.equipmentClaim_removeByIds,
                    {
                        ids: _this.idss   //将选中项的的ids给ids（字符串形式，逗号分隔）
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.idss='';
                        _this.equipmentClaim_flipList();
                    },
                )
            },
            search() { //查询
                this.currentPage=1;
                this.equipmentClaim_flipList();  //调用显示接口
            },
            handleSubmit(name) {  //表单验证
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.equipmentClaimEdit();  //调用编辑接口
                        this.$Message.success('提交成功!');
                        this.modal5 = false;         //关闭模态框
                        this.handleReset('formValidate');
                        this.equipmentClaim_flipList();
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset(name) {  //重置
                this.$refs[name].resetFields();
            },

            /*组织机构数*/
            organization_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.baseData = data;
                        _this.baseData[0].expand=true;
                    }
                )
            },

            /*字典数据相关接口*/
            dictionary_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "esType",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.truckTypeData = data;
                    }
                )
            },
        }
    }
</script>
<style lang="less" scoped>
    #fireManagement {
        height: 100%;
        overflow: auto;
        padding: 15px;

    .trees {
        width: 260px;
        height: 100%;
        padding-bottom: 30px;
        float: left;
        border: 1px solid #d3d8e0;
        overflow: auto;

    .tree_title {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;

    .tree_title_h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .tree_body {
        padding: 10px;
    }

    }
    .body_right {
        margin-left: 280px;
        height: 100%;
        overflow: auto;

    .header-right {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;
        font-size: 14px;
        color: #657180;
        line-height: 40px;
        font-family: '微软雅黑';
    }

    .btn_group {
        width: 100%;
        padding: 1.5rem 0;
    }

    .tableWidth {
        width: 100%;
    }

    }

    }
    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }
</style>
